<template>
  <v-form v-model="valid" ref="myBrandForm">
    <v-text-field label="品牌名称" :rules="nameRule" required v-model="brand.name"></v-text-field>
    <v-text-field label="品牌首字母" :rules="letterRule" required v-model="brand.letter"></v-text-field>
    <Cascader
      url="/item/category/list"
      multiple
      required
      v-model="brand.categories"
      label="请选择商品分类"
    />
    <v-layout >
      <v-flex  xs="3">
        <span style="font-size: 12px;color: #444444">品牌LOGO</span>
      </v-flex>
      <v-flex>
        <upload
          url="/upload/image"
          v-model="brand.image"
          :multiple="false"
          :pic-height="90"
          :pic-width="250"

        ></upload>
      </v-flex>
    </v-layout>
    <v-spacer/>
    <v-btn  @click="$refs.myBrandForm.reset(),reset(),brand.categories=[]">重置</v-btn>
    <v-btn  color="primary" @click="submit()">提交</v-btn>
  </v-form>
</template>

<script>
  import Cascader from  "../../components/cascader/Cascader";
  import upload from  "../../components/form/Upload";
  import message from "../../components/messages/index";

    export default {
        name: "MyBrandForm",
      components:{
        Cascader,
        upload,
      },
      props:{
          oldBrand:{
            type:Object,
          },
          isEdit:{
            type:Boolean,
          },
          show:{
            type:Boolean,
          }
      },
      watch:{
        show:{
          deep:true,
          handler(value){
            // alert(value+"我是show")
            this.brand={
              name:"",
              image:"",
              letter:"",
              categories:[],
            }
          },
          },
          oldBrand:{
            handler(value){
              if(value){
                // alert(value+"我是oldBrand")
                //注意不要直接赋值，会影响到父组件中的数据，copy属性就可以了
                this.brand=Object.deepCopy(value); //自定义的对象进行深度赋值的方法
              }else {//需要监听是否为空，为空就进行初始化
                alert("value没有数据{}"+value)
                //初始化brand
                this.brand={
                  name:"",
                  image:"",
                  letter:"",
                  categories:[],
                }
              }
            },
            deep:true,
          },

      //   isEdit:{
      //       deep:true,
      //       handler(value){
      //         alert(value)
      //         if(value){
      //           this.isEdit=value;
      //         }else {
      //           this.brand={};
      //         }
      //       }
      //   }
      },
      methods:{
          reset(){
            console.log(this.brand.categories[0])
            // console.log(this.$refs);
            console.log("---------------------")
          },
        submit(){
            // console.log(this.$qs)
            //验证表单是否通过
            if(this.$refs.myBrandForm.validate){
              //使用结构函数接受请求参数,因为需要对categories和letter单独处理，其他参数在params中
              const {categories,letter,...params}=this.brand;
              //我们存商品类别的时候存的是id 所以需要转化一下
              params.cids=categories.map(c=>parseInt(c.id)).join(",");
              //将字母全部转为大写
              params.letter=letter.toUpperCase();
              var mv=this;
              //将数据提交到后台
              var url=this.isEdit?"updateBrand":"addBrand";

              this.$http.post("item/brand/"+url,mv.$qs.stringify(params)).then(function () {
                //交给父组件控制表单是否显示
                mv.$emit("close");
                mv.$message.success(mv.isEdit?"this修改成功":"this添加成功")
                mv.brand={};
                // $.messages.alert("提示","添加成功");
              }).catch(function () {
                mv.$message.error(mv.isEdit?"this修改失败":"this添加失败")
              });
            }
        }
      },
      data:function () {
        return{
          valid:false,//验证表单是否通过
          nameRule:[
            v=>!!v|| "name is required",
            v=>(v && v.length>0 )||"名称长度最少一个字符",
          ],
          letterRule:[
            v=>!!v || "letter is required",
            v=>/^[A-Z]{1}$/.test(v)|| "首字母只能是一个大写字母",
          ],
          brand:{//品牌对象
            name:"",//品牌名称
            image:"",//品牌logo
            letter:"",//品牌首字母
            categories:[],//品牌所属的分类数组

          }
        }
      }
    }
</script>

<style scoped>

</style>
